<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>图书管理系统</title>
  <script src="js/jquery-3.6.0.min.js"></script>
  <script src="js/bootstrap.bundle.min.js"></script>
  <script src="js/jquery.cookie.min.js"></script>
  <script src="js/nav.js"></script>
  <link rel="stylesheet" href="css/bootstrap.min.css">
  <!-- 引入图标 -->
  <link rel="shortcut icon" href="img/favicon.ico" type="image/x-icon">   
  <link rel="stylesheet" href="css/nav.css">
  <!-- <link rel="stylesheet" href="css/iconfont.css"> -->

  <style>
    *{
      margin: 0;
      padding: 0;
    }
    /* 通过阿里巴巴引入外部图标 */
    @font-face {
    font-family: 'iconfont';  /* project id 3326910 */
    src: url('');
    src: url('?#iefix') format('embedded-opentype'),
    url('//at.alicdn.com/t/font_3326910_rtmdainydh.woff2') format('woff2'),
    url('//at.alicdn.com/t/font_3326910_rtmdainydh.woff') format('woff'),
    url('//at.alicdn.com/t/font_3326910_rtmdainydh.ttf') format('truetype'),
    url('#iconfont') format('svg');
  }
  .iconfont{
    font-family:"iconfont" !important;
    font-size:16px;font-style:normal;
    -webkit-font-smoothing: antialiased;
    -webkit-text-stroke-width: 0.2px;
    -moz-osx-font-smoothing: grayscale;
  }

    .search-box{
      position: relative;
      top: 100px;
      width: 100%;
    }
    .bookshelf{
      position: absolute;
      top: 500px;
      right:20px;
      width: 300px;
      /* height: 400px; */
      background-color: rgb(211, 211, 211);
      padding-top: 50px;
      padding-bottom: 30px;
      border-radius: 20px;
    }
    .bookshelf-bag{
      position: absolute;
      top: -40px;
      left: 110px;
      width: 80px;
      height: 80px;
      background-color: cadetblue;
      border-radius: 50%;
    }
    .bookshelf-box{
      transition: all 0.2s ease-in 0.1s;
    }
    .bookshelf-bag img{
      position: absolute;
      top: 10%;
      right: 10%;
      width: 80%;
      height: 80%;
    }
    .bookshelf-item{
      height: 40px;
      padding: 10px 0;
      line-height: 20px;
      background-color: rgb(190, 190, 255);
      margin-top: 10px;

    }
    .bookshelf-item-name{
      position: absolute;
      left: 10px;
      cursor: default;
    }
    .bookshelf-item-remove{
      position: absolute;
      right: 10px;
      width: 20px;
      display: inline-block;
      cursor: pointer;
      transition: all 0.1s ease-in 0.1s;
    }
    .bookshelf-item-remove:hover{
      color: rgb(255, 5, 5);
    }
    .content{
      position: relative;
      top: 160px;
      /* height: 600px; */
      width: 100%;
      /* background-color: aqua; */
      display: flex;
      flex-direction: column;
    }
    .book-window{
      margin: 20px 0;
      width: 100%;
      height: 180px;
      background-color: rgb(199, 199, 199);
      border-radius: 20px;
      transition: all 0.1s ease-in 0.1s;
      padding: 10px 20px;
    }
    .book-window:hover{
      box-shadow:  17px 17px 34px #bebebe,
                  -17px -17px 34px #ffffff;
    }
    .book-window img{
      height: 160px;
    }
    .book-image {
      position: relative;
      float: left;
      margin-left: 10px;
    }
    .book-info{
      position: relative;
      float: left;
      margin-left: 10px;

    }
    .book-info-base{
      top: 0;
      width: 100%;
      height: 100%;
      /* background-color: #045388; */
      z-index: 4;
    }
    .book-info-brief{
      top: 0;
      z-index: 3;
    }
    .book-name{
      font-size: 24px;
    }
    .book-info-top{
      z-index: 4;
    }
    .book-info-buttom{
      z-index: 3;
    }
  </style>
</head>  
<body>
  <!-- 页面导航 -->
  <nav>

    <ul class="nav justify-content-center nav-pills">
      <li class="nav-item">
        <a class="nav-link " href="index.html">首页</a>
      </li>
      <li class="nav-item">
        <a class="nav-link active" href="search.html">查询</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="borrow.html">借书</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="return.html">归还</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="person.html">个人信息</a>
      </li>
    </ul>
  </nav>
  <!-- 模态框 -->
<div class="modal fade" id="myModal">
  <div class="modal-dialog modal-lg">
    <div class="modal-content">
 
      <!-- 模态框头部 -->
      <div class="modal-header">
        <h4 class="modal-title">书籍简介</h4>
        <button type="button" class="close" data-dismiss="modal">&times;</button>
      </div>
 
      <!-- 模态框主体 -->
      <div class="modal-body">
        《人类简史：从动物到上帝》以演化生物学的角度介绍了人类的历史。赫拉利认为生物学限定了人类活动的极限，
        而文化则塑造了在极限以内所发生的事情，历史学科则是对文化变迁的记录。
        《人类简史：从动物到上帝》将从石器时代至今天智人的演化历史分为了四个阶段：
        认知革命（约公元前70000年，智人演化产生了想象力，出现能够描述故事的语言）、
        农业革命（约公元前12000年，农业开始发展，智人开始驯化动植物）、人类的融合统一
        （人类政治组织逐渐融合统一为一个“全球帝国”）、科学革命（约公元1500年至今，出现了现代科学）。
      </div>
 
      <!-- 模态框底部 -->
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-dismiss="modal">关闭</button>
      </div>
 
    </div>
  </div>
</div>
  <div class="container">
    <!-- 搜索栏 -->
    <div class="input-group mb-3 search-box">
      <!-- <div class="input-group-prepend">
        <span class="input-group-text" id="basic-addon1">书名</span>
      </div> -->
      <input type="text" id="search-keyword" class="form-control" placeholder="书名、作者、出版社" aria-label="Username" aria-describedby="basic-addon1">
      <div class="input-group-prepend">
        <button class="btn btn-outline-secondary" type="button" id="search-btn">查询</button>
      </div>
    </div>
    <div class="content">

    </div>
  </div>
  <!-- 书架 -->
  <div class="bookshelf">
    <div class="bookshelf-bag">
      <img src="img/bag.png" alt="">
    </div>
    <div class="bookshelf-box">

    </div>


  </div>

  <script>

    // 书架信息
    var bookshelfData=[]

    // 书籍搜索信息
    var booksData=[]
    // 在页面渲染完成后即判断用户书架里有没有数据，有的话就渲染到页面上
    $(document).ready(function(){
      if(sessionStorage.getItem('books')!==undefined&&sessionStorage.getItem('books')!==null){
        var seesionBooks=JSON.parse(sessionStorage.getItem('books'))
        bookshelfData=seesionBooks
        updataBookShelfView(bookshelfData)
      }
    })
    
        // 单点击搜索按钮
    $('#search-btn').click(function(){
      searchBooks()
    })
    // 搜索函数
    function searchBooks(){
       // 获取搜索框数据并将搜索框的空格清理掉
     var keyWord = $('#search-keyword').val().replaceAll(' ','')
     if(keyWord===''){
       alert("请输入搜索关键词！")
       return;
     }
    //  清除掉页面原来显示的书籍
      $('.book-window').remove()
      // 发送ajax请求
     $.get(
       "http://localhost:8080/QueryBookController",
       {
        bkInfo:keyWord
       },
       function(data,status){
         if(status==='success'){
             // 处理data
             data=JSON.parse(data)
             if(data.status===5){
              booksData=data.data
              for(var i=0;i<booksData.length;i++){
                  // 字符串模板写法 `` ,变量用${变量}
                  // PS：如何打出 `` 切换英文输入法，点tab上面esc下面的按键
                  var html=`      
                <div class="book-window">
                  <div class="book-image">
                    <img src="${'http://localhost:8080/' +booksData[i].bkImageUrl}" alt="封面">
                  </div>
                  <div class="book-info">
                    <div class="book-info-base">
                      <p><span class="book-name" >${booksData[i].bkName}</span> &#160;&#160;&#160;&#160;<span>${booksData[i].bkAuthor}</span></p>
                      <p>出版社：<span>${booksData[i].bkPress}</span></p>
                      <p>价格：<span>${booksData[i].bkPrice}</span>元 &#160;&#160;&#160;&#160; 数量：<span>${booksData[i].bkNum}</span> &#160;&#160;&#160;&#160;借阅状态：<span>可借阅</span></p>
                      <button type="button" class="btn btn-link" data-toggle="modal" data-target="#myModal">查看简介>>></button>
                      <button  type="button" class="btn btn-primary btn-sm add-bookshelf-btn">加入书架</button>
                    </div> 
                </div>`
                // 将数据渲染的元素添加到我们用来展示书籍的div中
                $('.content').append(html)
                }
             }else{
               alert(data.msg)
             }
         }else{
           alert("查询失败")
         }
       }
     )
    }
    // 添加书籍到书架上
// click 事件在页面初始化时就被注册，因此后面动态添加的元素无法被绑定
    // 解决办法一：在元素动态渲染完成后再注册点击事件
    // 解决办法二：为一个父元素下的所有选定的元素都注册点击事件
    $(".content").on("click", ".add-bookshelf-btn", function(e) {
      // 获取触发点击事件的节点在整个元素列表中的下标
      var index = $(e.target.parentNode.parentNode.parentNode).index()
      // 遍历书架里的书籍，判断里面是否有书籍的id一致，如果重复，则不添加
      for(var i=0;i<bookshelfData.length;i++){
        if(bookshelfData[i].bkId===booksData[index].bkId){
          alert("请勿重复添加同一本书")
          return;
        }
      }
      // 将要添加的书籍信息添加到书架的对象数组中
      bookshelfData.push(booksData[index])
      if(sessionStorage.getItem('books')!==undefined){
        sessionStorage.removeItem('books');
      }
      sessionStorage.setItem('books',JSON.stringify(booksData) );
      updataBookShelfView(bookshelfData)
    });
    // 书架视图更新函数，将新的数据渲染到页面上
    function updataBookShelfView(books){
      $('.bookshelf-item').remove()
      for(var i=0;i<books.length;i++){
        var html=`      
        <div class="bookshelf-item">
          <span class="bookshelf-item-name">${books[i].bkName}</span>
          <i class="iconfont bookshelf-item-remove">&#xe66b;</i>
        </div>`
        // 将要添加的书籍信息元素渲染到页面上
        $('.bookshelf-box').append(html)
        // console.log(html);
      }
    }
    // 删除书架里的书籍
    $('.bookshelf-box').on("click",'.bookshelf-item-remove',function(e){
      // 获取需要删除的书籍元素在书架中的下标
      var index =$(e.target.parentNode).index()
      // 删除本地书架数据里的对象
      bookshelfData.splice(index,1)
      // 删除元素节点
      e.target.parentNode.remove()
      // 将sessionStorage里的书据清除掉再写入新的数据，以实现书架信息更新
      sessionStorage.removeItem('books')
      sessionStorage.setItem('books',JSON.stringify(bookshelfData))
    })

    //  添加键盘按键监听事件，以实现回车搜索
    $(document).keyup(function(e){ 
      // 如果监听到键盘码值为13，则直接搜索
      if(e.which===13){
        searchBooks()
      }
    })
  </script>
</body>
</html>